<script setup lang='ts'>
import { reactive } from 'vue';
import { guild_roomApi } from '@/api/controller';
import { ToastSuccess, ToastWarning, Toastloading } from '@/utils/public';
import { ElMessageBox } from 'element-plus';
import Pagination from "@/components/Pagination/index.vue";
const action = reactive({
  dialogFormVisible: false,
  id: 0,
  total:0,
  list: [],
  page: 1,
  limit: 20,
})
const identityType = [
  "成员",
  "会长",
  "副会长",
  "宣传部长",
  "接待部长",
  "财政部长",
  "女团队长",
  "男团队长",
];
const kickUnionUser = (row: any = {}) => {
  ElMessageBox.confirm("是否踢出该用户?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    const loading = Toastloading();
    const { un_id, user_id, role_id} = row;
    guild_roomApi.kickUnionUser({
      un_id,
      user_id,
      role_id
    }).then(() => {
      ToastSuccess("操作成功!");
      loading.close();
      getList();
    }).catch(() => {
      loading.close();
    })
  }).catch(() => { });
}
const getList = async () => {
  const loading = Toastloading()
  const res = await guild_roomApi.getUnionUserList({
    page:action.page,
    limit:action.limit,
    id: action.id
  })
  const { data = [], total=0 } = res.data || {}
  action.list = data
  action.total = total
  loading.close()
}
const openDialog = async (query: any = {}) => {
  const { id = 0 } = query
  if (!id) return ToastWarning('id not defing')
  action.id = id
  await getList()
  action.dialogFormVisible = true
}
defineExpose({
  openDialog
})
</script>

<template>
  <div>
    <el-dialog top="5vh" class="xm-dialog xm-TableCenter" v-model="action.dialogFormVisible" width="65%" title="公会成员">
      <el-table :data="action.list" border height="450px">
        <el-table-column prop="user_uuid" width="120" label="用户uid" />
        <el-table-column prop="nickname" min-width="180" label="用户昵称" />
        <el-table-column prop="created_at" min-width="180" label="加入时间" />
        <el-table-column width="120" label="公会角色">
          <template #default="scope">
            <span>
              <el-tag class="info">{{ identityType[scope.row.role_id]}}</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="room_uid" width="180" label="操作">
          <template #default="scope">
            <span>
              <el-button type="danger" @click="kickUnionUser(scope.row)">踢出公会</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="action.total > 0"
        :total="action.total"
        v-model:page="action.page"
        v-model:limit="action.limit"
        @pagination="getList"
      />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped >
:deep(.xm-dialog) {
  .el-dialog__body {
    padding: 10px 20px 20px;
  }
}
</style>